<template>
	<div>
		<div class="a_bk"></div>
		<div style="white-space: pre-line; ">
			<el-row type="flex"  align="middle" justify="center">
				<el-col :span="5">
					<h2 class="title animate__animated animate__fadeInRight" style="margin-top:180px">OUR ACTIVITY</h2>
				</el-col>
			</el-row>
			<el-row type="flex" align="middle" justify="center">
				<el-col :span="12">
					<h2 class="title animate__animated animate__fadeInLeft" style="font-size: 25px;">工作室活动丰富，各种活动络绎不绝</h2>
				</el-col>
			</el-row>
			<el-row type="flex" align="middle" justify="center" class="animate__animated animate__fadeInUpBig">
				<el-col :span="5" >
					<div class="box">
						<div class="box2" style="width: 80%;">
							<div style="display: flex; justify-content: center;">
								<img src="../assets//img/all.png" class="icon"/>
							</div>
							<div @click="getActivity(1)">
								<el-card style="margin-top: 100px; height: 240px;" class="box3 box4" v-if="asss === 1">
									<h4  >All</h4>
									<div>所有活动</div>
								</el-card>
								<el-card style="margin-top: 100px; height: 240px;" class="box3 " v-else>
									<h4  >All</h4>
									<div>所有活动</div>
								</el-card>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="5" >
					<div class="box">
						<div class="box2" style="width: 80%; margin-top: 100px;">
							<div style="display: flex; justify-content: center;">
								<img src="../assets//img/planning.png" class="icon"/>
							</div>	
							<div @click="getActivity(2)">
								<el-card style="margin-top: 100px; height:  220px;" class="box3 box4" v-if="asss === 2">
									<h4>Planning</h4>
									<div >近期计划</div>
								</el-card>
								<el-card style="margin-top: 100px; height:  220px;" class="box3" v-else>
									<h4>Planning</h4>
									<div >近期计划</div>
								</el-card>
							</div>
							
						</div>
					</div>
				</el-col>
				<el-col :span="5" >
					<div class="box">
						<div class="box2" style="width: 80%; margin-top:  100px;">
							<div style="display: flex; justify-content: center;">
								<img src="../assets//img/entertainment.png" style="height: 38px;" class="icon"/>
							</div>	
							<div @click="getActivity(3)">
								<el-card style="margin-top:  100px; height:  250px;" class="box3 box4"  v-if="asss === 3">
									<h4 >Entertainment</h4>
									<div>娱乐活动</div>
								</el-card>
								<el-card style="margin-top:  100px; height:  250px;" class="box3"  v-else>
									<h4 >Entertainment</h4>
									<div>娱乐活动</div>
								</el-card>
							</div>
						</div>	
					</div>
				</el-col>
				<el-col :span="5">
							<div class="box">
								<div class="box2" style="width: 80%;;">
									<div style="display: flex; justify-content: center;">
										<img src="../assets//img/test.png" class="icon"/>
									</div>
									<div @click="getActivity(4)">
										<el-card style="margin-top:  100px; height:  230px;" class="box3 box4" v-if="asss === 4">
											<h4 >Competition</h4>
											<div>竞赛信息</div>
										</el-card>
										<el-card style="margin-top:  100px; height:  230px;" class="box3"  v-else>
											<h4 >Competition</h4>
											<div>竞赛信息</div>
										</el-card>
									</div>
								</div>
								
							</div>
						</el-col>
					
			</el-row>
			<!-- el-row  type="flex" justify="center" align="middle" style="margin-top: 200px;">
				<el-col :span="8" style="text-align: center;">
					<p style="color: #FFFFFF;font-size: 40px;font-weight: 500px;">所有活动</p>
				</el-col>
			</el-row> -->
			<el-row :gutter="40"  type="flex" justify="center" v-loading="loading" style="margin-top: 150px;">
				<el-col :span="18" :offset="0" style="display: flex; flex-wrap: wrap;">
					<el-col  :xs="12" :sm="12" :md="12" :lg="24" :xl="8"  v-for="(item,n) in activityForm" :key="n">
						<el-card  class="activityCard animate__animated animate__fadeInUp" :style="getStyle()">
								
							<!-- <el-button class="button"  @click="Mprint(item)" >{{item}}</el-button> -->
						<div slot="header" class="clearfix">
						    <h3>{{item.title}}</h3>
							<span style="font-size: 15px;">活动时间：{{item.activeTime}}</span>
							<br>
							<span style="font-size: 15px;">针对人群：{{item.people}}</span>
							<br>
							<span style="font-size: 15px;">活动类型：{{item.type}}</span>
						    <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
						 </div>
						 <div>
							<span v-html="item.content"></span>
							<div style="text-align: center;">
								<!-- <el-image :src="item.picture" @click="Mprint(item)" style="border-radius: 20px; margin-top: 50px;margin-bottom: 30px;width: 70%;"></el-image> -->
							<el-divider></el-divider>
							</div>
							<span style="font-size: 15px;">创建时间：{{item.createTime}}</span>
							<br>
							<span style="font-size: 15px;">发布人：{{item.user.name}}</span>
						</div>
						</el-card>
					</el-col>
				</el-col>
				
			</el-row>
			<el-row  type="flex"  align="middle" justify="center">
				<el-col :span="5" style="text-align: center;">
					<el-pagination
						@current-change="getAll"
						background
						page-size="6"
						layout="prev, pager,next "
						:total="total">
					</el-pagination>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	
	export default {
		name: 'about',
		props: {},
		components: {
			process
		},
		data: function() {
			return {
				show:1,
				img:require('../assets//img/6.jpg'),
				asss:1,
				total:10,
				activityForm:[]
			}
		},
		methods:{
			getStyle:function(){
			   let r = Math.floor(Math.random()*255);
			   let g = Math.floor(155);
			   let b = Math.floor(Math.random()*255);
			   return 'background-color: rgba('+ r +','+ g +','+ b +',0.8)';
			 },
			getActivity:function(n){
				this.asss = n
				
				this.getAll(1)
			},
			getAll: async function(n){
				this.loading = true
				let type = (this.asss-1)
				let res = await this.text(this.$api.getNumActivity+"?type="+ type)
					
					if (res.code === 200) {
						this.total = res.data.num
						
					}else if (res.code === 50014) {
					
					this.$message.error('用户权限不足');
				}else{
						this.$message.error('请求失败或者接口返回失败');
					}
				this.activityForm.length = 0
				this.activityForm.push()
				
				let b = (n-1) * 6
				let e = n * 6
				res = await this.text(this.$api.showManyActivity+"?page="+b+"&num="+e+"&type="+type)
				
				if (res.code === 200) {
					res.data.forEach(e =>{
						let type = "其他"
						if(e.type === 1){
							type = "近期计划"
						}else if(e.type === 2){
							type = "娱乐活动"
						}else if(e.type === 3){
							type = "竞赛信息"
						}
						
						let x =	e.people.substring(0,1)
						let y =	e.people.substring(1,2)
						let people = this.$GLOBAL.people[x][y]
						this.activityForm.push(
						{
							"id": e.id,
							"content": e.content,
							"user": e.user,
							"title": e.title,
							"type": type,
							"picture": this.$api.picTemplate+e.picture,
							"createTime":this.$dateFormat(e.createTime),
							"activeTime": this.$dateFormat(e.activeTime),
							"people":people
						})
					})
					
				}else if (res.code === 50014) {
					
					this.$message.error('用户权限不足');
				}else{
						this.$message.error('请求失败或者接口返回失败');
				} 
				
				this.loading = false;
			}
		},
		async created() {
			
			this.getActivity(1)
		}
	}
</script>

<style scoped>
	@import url("../assets/style/activity.css");
</style>
